Skip to content

improvement(responsive): Select fluid + width-less controls keep size (CUI-36) - #1172

Merged
bert-e merged 4 commits into
development/1.0from
improvement/CUI-36-select-fluid
Jul 29, 2026
Merged

improvement(responsive): Select fluid + width-less controls keep size (CUI-36)#1172
bert-e merged 4 commits into
development/1.0from
improvement/CUI-36-select-fluid

Conversation

@JeanMarcMilletScality

@JeanMarcMilletScality JeanMarcMilletScality commented Jul 24, 2026 •
edited by atlassian Bot
Loading

Copy link
Copy Markdown
Contributor

TL;DR — Extends the responsive Form treatment beyond Input: a Select now shrinks to fit its column (and auto-enables inside a <Form responsive>), and a width-less control such as a TextArea keeps its intrinsic size in the fluid column instead of being stretched to fill it.

Context

CUI-32 made Form/Input responsive but, as documented there, only Input was fluid — Select, SearchInput, TextArea kept their width and overflowed a shrinking column. CUI-36 is the follow-up that closes that gap for the remaining inputs. This PR is rebased onto the merged CUI-32 grid layout (its earlier stacked-on-CUI-32 history was dropped in favor of the final merged version).

Approach

Select fluid (selectv2). Add a fluid prop mirroring Input: the size-derived width becomes a preferred width (max-width: 100%; min-width: 0) that shrinks to fit its column instead of overflowing, and the menu widens to match. fluid turns on automatically when the Select sits inside a <Form responsive> (read from the FormGroup FieldContext), so a responsive Form makes its Selects shrink with no per-field prop. Opt-in and non-breaking outside a responsive Form.

Width-less controls keep their size (form). With helpErrorPosition="bottom" the field sits in a vertical Stack whose default align-items: normal (stretch) stretched a control sized only by its cols (a TextArea) to fill the fluid 1fr column. The field content is now left-aligned in that case, so the control keeps its intrinsic size. Input is unaffected (max-width: 100%); the horizontal (help-on-right) and non-responsive layouts are untouched.

Review focus

  • 🟡 selectv2/Selectv2.component.tsx — fluid plumbing + auto-on via useFieldContext; confirm a Select outside a responsive Form is unchanged.
  • ⚪ selectv2/SelectStyle.ts — fluid → max-width: 100%; min-width: 0 and menu width: 100%.
  • ⚪ form/Form.component.tsx — align-items: flex-start only in responsive + non-right help position.

How to test

  • Storybook → Templates/Form with responsive — a Select shrinks with the column; a TextArea stays at its cols size rather than stretching. Sanity-check a plain Select (no Form) looks unchanged.
  • Jest — npx jest src/lib/components/form src/lib/components/selectv2

References

  • CUI-32 — responsive/fluid Form + Input (merged, the base for this work).
  • CUI-36 — extend fluid to Select / SearchInput / TextArea / horizontal RadioGroup (this PR).

JeanMarcMilletScality and others added 2 commits July 24, 2026 16:39
@JeanMarcMilletScality @claude
feat(select): fluid width, auto-on inside a responsive Form (CUI-36)
ca41923 
Add a `fluid` prop to Select mirroring Input: the size-derived width becomes a
preferred width (max-width:100%, min-width:0) that shrinks to fit its column
instead of overflowing, and the menu widens to match. Fluid turns on
automatically when the Select sits inside a `<Form responsive>` (read from the
FormGroup FieldContext), so a responsive Form makes its Selects shrink with no
per-field prop. Opt-in and non-breaking outside a responsive Form.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@JeanMarcMilletScality @claude
fix(form): keep width-less controls at intrinsic size in a fluid colu…
ce47d09 
…mn (CUI-36)

In a `responsive` Form with `helpErrorPosition="bottom"`, the field sits in a
vertical Stack whose default `align-items: normal` (stretch) stretched a
width-less control — a TextArea sized only by its `cols` — to fill the fluid
`1fr` column. Left-align the field content in that case so the control keeps
its intrinsic size. Input is unaffected (it caps via `max-width: 100%`), and
the horizontal (help-on-right) layout and non-responsive forms are untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bert-e

bert-e commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval ⭐
/bypass_build_status Bypass the build and test status ⭐
/bypass_commit_size Bypass the check on the size of the changeset TBA ⭐
/bypass_incompatible_branch Bypass the check on the source branch prefix ⭐
/bypass_jira_check Bypass the Jira issue check ⭐
/bypass_peer_approval Bypass the pull request peers' approval ⭐
/bypass_leader_approval Bypass the pull request leaders' approval ⭐
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e

bert-e commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

JeanMarcMilletScality and others added 2 commits July 24, 2026 17:11
@JeanMarcMilletScality @claude
docs(form): update responsive JSDoc to note Select honors fluid width…
8bc97ab 
… (CUI-36)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@JeanMarcMilletScality @claude
fix(form): shrink forceLabelWidth column under pressure when responsi…
652681e 
…ve (CUI-32)

A section with forceLabelWidth froze its label column to an exact pixel
width, so in a responsive Form the label never shrank — only the field
track did, until the row flipped to stacked. Treat forceLabelWidth as the
column's upper bound instead: responsive wraps it in minmax(min-content,
Npx) so the column keeps Npx while there is room and shrinks down to its
longest word as the field is squeezed, with rows staying aligned.
Non-responsive stays pinned to the exact width (unchanged).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
claude[bot]
claude Bot reviewed Jul 24, 2026
View reviewed changes
Comment thread src/lib/components/form/Form.component.tsx
@bert-e

bert-e commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@bert-e

bert-e commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@JeanMarcMilletScality

JeanMarcMilletScality commented Jul 29, 2026

Copy link
Copy Markdown
Contributor Author

/approve

@bert-e

bert-e commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

  • ✔️ development/1.0

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

  • Any commit you add on the source branch will trigger a new cycle after the
    current queue is merged.
  • Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

@bert-e

bert-e commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue CUI-36.

Goodbye jeanmarcmilletscality.

@bert-e
bert-e merged commit cfdd230 into development/1.0 Jul 29, 2026
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments
@damiengillesscality damiengillesscality damiengillesscality approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@JeanMarcMilletScality @bert-e @damiengillesscality